import styled from 'styled-components';


export const PlayDetailsContainer = styled.div.attrs(({ theme }) => theme)`
    width: 58%;
    margin:.1rem auto;
    padding:.5rem ;
    box-sizing:border-box ;
    box-shadow: 0px 0px 12px ${props => props.contentSecondaryBackgroundColor};
    background:${props => props.contentSecondaryBackgroundColor};
    @media screen and (max-width:1260px){
        width:100% ;
    }
    &::after{ //清除浮动！
        clear:both;
        display:block;
        content:"";
    }
`

export const PlayListContainer = styled.div.attrs(({ theme }) => theme)`
    margin-top:1rem;
    .play-list-item{
        &:nth-child(2n+1){
            background-image: ${props => props.contentGradientBackgroundColor};
        }
        &:hover{
            box-shadow: 2px 2px 10px ${props => props.contentBackgroundColor};
        }
        display:flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        font-size:.33rem;
        border-radius: 8px;
        margin:.3rem 0;
        padding:.2rem .18rem;
        background-color: ${props => props.contentBackgroundColor};
        /* 歌曲基本信息 */
        .baseInfo{
            max-width: 60%;
            word-wrap: break-word;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .index{
                color:${props => props.secondaryTextColor};
                margin:0 .1rem 0 0;
            }
            .name{
                font-size: .29rem;
                display:inline;
                color:${props => props.textColor}
            }
            .al_name{
                font-size:.2.88rem;
                display:inline;
                color:${props => props.secondaryTextColor}
            }
            .singer{
                font-size:.2rem;
                color:${props => props.secondaryTextColor};
                margin-top:.1rem;
            }
        }
        .controller-icon{
            /* align-self: flex-end; */
            /* justify-self: flex-end; */
            /* justify-content: flex-end; */
            .icon{
                font-size:.58rem;
                color:${props => props.textColor}
            }
        }
        
    }
`
